<template>
	<view class="layer">
		<!-- 文章列表 -->
		<view class="article-layer">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrollBottom()">
				<view class="article-list" v-for="(item,index) in articleList" :key="index" @click="goDetails(item.ID)">
					<image class="img" mode="aspectFill" v-if="item.Thumb" :src="item.Thumb" :lazy-load="true"></image>
					<view class="article-info" :class="item.Thumb ? '' : 'article-info-active'">
						<text class="article-title line-two">{{item.Title}}</text>
						<view class="article-m">
							<text class="span">发布于{{item.NewTime}}</text>
							<text class="span">热度{{item.ViewNums}}</text>
						</view>
					</view>
				</view>
				<u-loadmore 
					:status="status" 
					:loading-text="loadingText"
					:loadmore-text="loadmoreText" 
					:nomore-text="nomoreText" 
				/>
			</scroll-view>
		</view>
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import { hotApi,listApi } from 'static/services/mineServices';
  	import shareMixin from '@/common/mixins/shareMixin.js';
	import { toDate,setStorageData,getStorageSyncData } from 'static/resource/until.js';
	export default {
    	mixins: [shareMixin],
		data() {
			return {
				searchData: {
					page: 1
				},
				articleList: [], // 文章列表
				pagebar: '',
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			}
		},
		onReady(val){
		},
		onShow(val){
		},
		onLoad(val) {
			this.init();
		},
		methods: {
			init(){
				if(this.searchData.page == '1'){
					// 获取缓存
					this.articleList = getStorageSyncData('hotList') ? JSON.parse(getStorageSyncData('hotList')) : [];
				}
				this.search();
			},
			async search(val){
				if(val && val == '1'){
					this.articleList = [];
				}
				this.status = 'loading';
				let d = await listApi(this.searchData);
				
				for(let i in d.list){
					if(!d.list[i].NewTime){
						d.list[i].NewTime =  toDate(d.list[i].UpdateTime,1).substring(0,10);
					}
					if(!d.list[i].Thumb && this.isImg == '1'){
						d.list[i].Thumb =  this.commonUrl + 'ly_autoimg/' + d.list[i].ID + '.jpg';
					}
				}
				
				if(this.searchData.page == '1'){
					// 对首页列表第一页进行缓存
					setStorageData('hotList',JSON.stringify(d.list));
					this.articleList = [];
				}
				this.articleList = this.articleList.concat(d.list);
				this.pagebar = d.pagebar;
				
				if(this.searchData.page >= d.pagebar.PageAll){
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
			},
			// 无限滚动触发
			scrollBottom(){
				this.status = 'loading';
				if(this.searchData.page >= this.pagebar.PageAll){
					this.status = 'nomore';
					return
				}
				this.searchData.page++; // 页面加加
				this.search(); // 获取列表
			},
			// 跳转详情
			goDetails(val){
				this.goPage('/subPackages/details/index?_swebfr=0&id=' + val);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.layer {
		width: 100%;
		height: 100%;
		background: #fff;
		.article-layer{
			width: 100%;
			height: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			.article-list{
				width: 100%;
				height: 180rpx;
				overflow: hidden;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				margin: 12rpx 0;
				box-shadow: 0px 1px 2px rgba(0,0,0,.1);
				padding: 10rpx;
				box-sizing: border-box;
				.img{
					width: 40%;
					height: 100%;
					flex-shrink: 0;
				}
				.article-info{
					width: 60%;
					height: 100%;
					padding: 14rpx 14rpx 14rpx 24rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.article-title{
						color: #000;
						font-size: 28rpx;
						line-height: 36rpx;
						width: 100%;
					}
					.article-m{
						width: 100%;
						display: flex;
						.span{
							color: rgba(0,0,0,.5);
							font-size: 24rpx;
							line-height: 36rpx;
							padding-right: 16rpx;
							box-sizing: border-box;
						}
					}
				}
				.article-info-active{
					width: 100%;
				}
			}
		}
	}

</style>
